<template>
  <div class="header">
    <div class="top">
      <router-link class="box" to="mymine">
        <div class="iconfont icon-zuojiantou"></div>
        <div class="back">返回</div>
      </router-link>
      <div class="text">我的订单</div>
    </div>
    <div class="background">
      <div class="bg"></div>
    </div>
    <div class="bottom">
      <div class="bt-box">
        <div
          v-bind:class="['bt', index == 1 ? 'active' : '']"
          @click="myClick(1)"
        >
          <div class="title">全部</div>
        </div>
        <!-- <div v-bind:class="['tab', index == 1 ? 'active' : '']"
          @click="myClick(1)">
          <van-empty description="没有订单数据">
            <van-button round type="danger" class="bottom-button"
              >按钮</van-button
            >
          </van-empty>
        </div> -->
      </div>
      <div class="bt-box">
        <div
          v-bind:class="['bt', index == 2 ? 'active' : '']"
          @click="myClick(2)"
        >
          <div class="title">进行中</div>
        </div>
        <!-- <div v-bind:class="['tab', index == 2 ? 'active' : '']"
          @click="myClick(2)">
          <van-empty description="没有订单数据">
            <van-button round type="danger" class="bottom-button"
              >按钮</van-button
            >
          </van-empty>
        </div> -->
      </div>
      <div class="bt-box">
        <div
          v-bind:class="['tab', index == 3 ? 'active' : '']"
          @click="myClick(3)"
        >
          <div class="title">已完成</div>
        </div>
        <!-- <div v-bind:class="['tab', index == 3 ? 'active' : '']"
          @click="myClick(3)">
          <van-empty description="没有订单数据">
            <van-button round type="danger" class="bottom-button"
              >按钮</van-button
            >
          </van-empty>
        </div> -->
      </div>
    </div>
    <div class="tab">
      <van-empty description="没有订单数据"> </van-empty>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.header {
  position: relative;
  .top {
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
    .box {
      display: flex;
      .iconfont {
      }
      .back {
      }
    }
    .text {
      margin-left: 120px;
    }
  }
  .background {
    .bg {
      width: 100%;
      height: 80px;
      background-color: #0c34ba;
    }
  }
  .bottom {
    border-radius: 20px;
    height: 100px;
    width: 98%;
    background-color: #fff;
    left: 0;
    top: 80px;
    display: flex;
    justify-content: space-around;
    position: absolute;
    margin-left: 3px;
    .bt-box {
        margin-top: 5px;
      .bt {
        width: 50px;
        text-align: center;
        padding-bottom: 10px;
      }
      .active {
        border-bottom: 5px solid #0c34ba;
      }
    }
  }
}
</style>


<script>
import "@/assets/fonts/iconfont.css";
export default {
  data() {
    return {
      index: 1,
    };
  },
  name: "dingdan",
  methods: {
    myClick(v1) {
      this.index = v1;
    },
  },
};
</script>